﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="Test_Default" Codebehind="Default.aspx.cs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
   
    <style type="text/css">
            .tab
            {
            	width:100%; height:33px; background:url(images/bq_1.gif) bottom repeat-x; background-color:#ffffff;padding-left:5px;
            }
            
            .tab ul
            {
            	padding:0px; margin:0px; list-style-type:none;
            }
            .tab ul li
            {
            	 margin-left:3px; background:url(images/bq_q_c.gif) 0px 3px repeat-x; position:relative; text-align:center; float:left; cursor:pointer;
            }
            .tab ul li a
            {
            	 font-size:12px;height:28px; padding-left:15px; line-height:33px; float:left; overflow:visible; white-space:nowrap; padding-right:15px; display:block; color:#476877; font-weight:normal; text-decoration:none;
            }
            .tab ul li a:hover
            {
            	color:#54879f; text-decoration:none;
            }            
            .tab ul li .menu_l
            {
            	width:5px; height:24px; background:url(images/bq_q_l.gif) left no-repeat; position:absolute; top:3px; left:0px;
            }
            .tab ul li .menu_r
            {
            	width:5px; height:24px; background:url(images/bq_q_r.gif) right no-repeat; position:absolute; top:3px; right:0px;
            }           
            
            
            .tab ul li.on
            {
            	background:url(images/bq_s_c.gif) repeat-x; margin-top:1px
            }
            .tab ul li.on a
            {
            	color:#000000; line-height:29px;
            }
            .tab ul li.on a:hover
            {
            	color:#03213a;
            }
            .tab ul li.on .menu_l
            {
            	width:5px; height:28px; background:url(images/bq_s_l.gif) left no-repeat; position:absolute; top:0px; left:0px;
            }
            .tab ul li.on .menu_r
            {
            	width:5px; height:28px; background:url(images/bq_s_r.gif) right no-repeat; position:absolute; top:0px; right:0px;
            }
    </style>
    <script type="text/javascript">
        function test(obj)
        {
            var li = obj.parentNode;
            var lis = obj.parentNode.parentNode.getElementsByTagName("li");
            if (li.className != "on")
            {
                for (var i = 0; i < lis.length; i++)
                {
                    if(lis[i].className == "on")
                    {
                        lis[i].className = "";
                    }
                }
                li.className = "on";
            }
            
            obj.blur();
        }
        
       
        
        function addEvent()
        {
            var obj = document.getElementById("top_daohang");
            var lis = obj.getElementsByTagName("a");
            for(var i=0;i<lis.length;i++)
            {
                lis[i].onclick = function()
                {
                    test(this);
                }
            }
        }

    </script>
</head>
<body style="margin:0px;">
    <form id="form1" runat="server">
    <div style="height:40px;"></div>
     <div id="top_daohang" class="tab">
	       <ul>
		       <li><div id="sf" class="menu_l"></div><div id="li_1_2" class="menu_r"></div>
	       	   <a href="#">集邮首恺撒打发页</a>
			   </li> 
			   <li class="on"><div id="da" class="menu_l"></div><div id="li_2_2" class="menu_r"></div>
	       	   <a href="#">淘宝邮票</a>
			   </li> 
			   <li><div id="li_3_1" class="menu_l"></div><div id="li_3_2" class="menu_r"></div>
	       	   <a href="#">奥运邮票</a>
			   </li>   
			   <li><div id="menu_l_1" class="menu_l"></div><div id="li_4_2" class="menu_r"></div>
	       	   <a href="#">我的邮票</a>
			   </li>
			   <li><div id="li_5_1" class="menu_l"></div><div id="li_5_2" class="menu_r"></div>
	       	   <a href="#">中奖名单</a>
			   </li> 
		   </ul>
	  </div>
	  <script type="text/javascript">
	    addEvent();
	  </script>
    </form>
</body>
</html>
